//生成环境

const path = require("path");

//在webpack中的loader其实就是一个个的函数（可以自己制作）

//webpack中的插件就是一个个构造函数 ，使用的时候就是实例化
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽取css 插件
const HtmlWebPackPlugin = require("html-webpack-plugin");//处理html模板文件

//创建一个抽离css插件的实例
const miniCssExtract = new MiniCssExtractPlugin({
    // 类似 webpackOptions.output里面的配置 可以忽略
    filename: 'css/app.[hash].css',
})

//创建一个html模板插入插件实例
const htmlWebpackPlugin = new HtmlWebPackPlugin({
    title: "webpack配置演示案例",//设置网页标题属性
    template: "../index.html",//设置html模板文件地址
    filename: "index.html",//输出的文件名
    minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
    },
    inject: "body",//插入（打包出来的js）文件的位置
    favicon: "favicon.ico",//收藏图标
    //是否压缩html里的js（使用uglify-js进行的压缩）
    minifyJS: true,
    //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
    minifyCSS: true,
    //是否移除属性的引号 默认false
    removeAttributeQuotes: true,
});

module.exports = {
    mode: "production",//设置模式production 会自动压缩 ，如果是开发环境development 就不会
    context: path.resolve(process.cwd(), 'src'),//配置基本目录
    entry: "./main.js",//入口
    output: {//输出配置
        path: path.resolve(process.cwd(), 'dist'),
        filename: "js/app.[hash].js"
    },
    devtool: "source-map",
    module: {//配置各个模块的处理方式
        rules: [
            {
                test: /(\.less|\.css)$/,
                // loader:"style-loader!css-loader!less-loader",//1.字符串方式（串联）
                // loader:['style-loader','css-loader','less-loader'],//2.数组形式
                loader: [//3.对象的形式 ，方便传入参数
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 这里可以指定一个 publicPath
                            // 默认使用 webpackOptions.output中的publicPath
                            publicPath: '../'//配置在css样式中的那些引入的资源文件（背景图片，字体）的相对于css文件的使用路径
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,//生成map映射
                        }
                    },
                    {
                        loader: "postcss-loader",
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true//生成map映射
                        }
                    }
                ]
            },
            {//针对于css样式中的字体文件处理（不需要额外的处理，只要将引入的字体文件拷贝到dist目录即可）
                test: /\.(ttf|woff|svg|woff2|eot)$/,
                loader: {
                    loader: "url-loader",
                    options: {
                        limit:20 * 1024,//设定当问及小于指定的大小时，转换成base64编码 - 20kb
                        outputPath: "fonts",//指定输出的目录
                    }
                }
            }
        ]
    },
    plugins: [//插件（负责处理loader能力之外的工作）
        miniCssExtract,//抽离css插件实例
        htmlWebpackPlugin,//生成html模板文件的插件
    ]
}